<template>
    <div class="sub-nav">
        <div class="navBottom" v-if="mold === 'navBottom'">
            <div class="nav-item">
                <router-link :to="{name:'RegisterView'}">注册账号</router-link>
                <router-link :to="{name: 'LoginView'}">登录Vue</router-link>
            </div>
            <div class="nav-item">
                <router-link to="https://movie.douban.com/">使用桌面版</router-link>
                <router-link to="#">使用VueAPP</router-link>
            </div>
        </div>
        <div class="quickNav" v-if="mold == 'quickNav'">
            <ul class="quick-nav">
                <li>
                    <router-link :to="{name: 'MovieView'}">影院热映</router-link>
                </li>
                <li>
                    <router-link :to="{name: 'StatusView'}">欧美新热榜</router-link>
                </li>
                <li>
                    <router-link :to="{name: 'RegisterView'}">注册帐号</router-link>
                </li>
                <li>
                    <!-- <template v-if="currentUser.email"> -->
                    <template v-if="true">
                        <a href="#" @click.prevent="logout()">退出登录</a>
                    </template>
                    <template v-else>
                        <router-link :to="{name: 'LoginView'}" replace>登录豆瓣</router-link>
                    </template>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'sub-nav',
        props: {
            mold: {
                type: String,
                default: 'quickNav'
            }
        },
        data(){
            return {}
        },
        computed: {
            currentLink: function(){
                return this.currentUser.name ? 'StatusView' : 'LoginView'
            }
        },
        created () {
            if(localStorage.getItem('email')) {
                this.$store.commit({
                    type: 'getLocalUser'
                })
            } else {
                
            }
        }
    }
</script>

<style lang="scss" scpoed>
    .navBottom {
        width: 100%;
        border-bottom: 0.1rem solid #f3f3f3;

        .nav-item {
            border-top: 0.1rem solid #f3f3f3;
            padding: 1.3rem 0;
            text-align: center;
            overflow: hidden;
        }

        a {
            width: 50%;
            float: left;
            margin: 0 auto;
            box-sizing: border-box;
            font-size: 1.5rem;
            color: #42bd56;

            &:first-child {
            border-right: 0.1rem solid #e5e5e5;
            }
        }
    }
    .sub-nav {
        margin: 0 1.8rem;
        padding-top: .2rem;
    }
    .quickNav {
        ul {
            overflow: hidden;
            margin: 1rem 0 0 0;
            padding-top: 0.6rem;

            li {
                width: 50%;
                padding: 0.3rem;
                font-size: 1.5rem;
                text-align: center;
                box-sizing: border-box;
                float: left;
                a {
                    display: block;
                    background: #f6f6f6;
                    max-width: 100%;
                    padding: 1.2rem 0;
                    line-height: 2rem;
                    color:#494949;
                    border-radius: 0.2rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-wrap: normal;
                }
            }
        }
    }
</style>
